"use client"

import { useState } from "react"
import { View, Text, StyleSheet, Image, TouchableOpacity, ScrollView, Platform, Alert } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { LinearGradient } from "expo-linear-gradient"
import {
    ChevronRight,
    Star,
    FileText,
    Shield,
    FileTerminal,
    MessageCircle,
    BookOpen,
    LogOut,
} from "lucide-react-native"
import { theme } from "../../constants/theme"
import { useRouter } from "expo-router"
import Animated, { FadeInDown, FadeInRight } from "react-native-reanimated"
import VipCard from "../../components/profile/VipCard"

export default function MyScreen() {
    const router = useRouter()
    const [isVipActivated, setIsVipActivated] = useState(false)
    const [vipExpiryDate, setVipExpiryDate] = useState("")

    // 添加退出登录处理函数
    const handleLogout = () => {
        Alert.alert("退出登录", "确定要退出登录吗？", [
            {
                text: "取消",
                style: "cancel",
            },
            {
                text: "确定",
                onPress: () => {
                    // 这里可以添加清除用户数据的逻辑
                    router.replace("/login")
                },
            },
        ])
    }

    return (
        <SafeAreaView style={styles.container} edges={["top"]}>
            <LinearGradient
                colors={["#EEF3FF", "#F5F8FF"]}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={styles.gradientBackground}
            >
                <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
                    {/* 头部用户信息 */}
                    <Animated.View style={styles.header} entering={FadeInDown.delay(100).springify()}>
                        <View style={styles.avatarWrapper}>
                            <LinearGradient
                                colors={["#8A6CEA", "#6A4AD4"]}
                                style={styles.avatarGradient}
                                start={{ x: 0, y: 0 }}
                                end={{ x: 1, y: 1 }}
                            >
                                <View style={styles.avatarContainer}>
                                    <Image
                                        source={{ uri: "https://cdn-icons-png.flaticon.com/512/3135/3135789.png" }}
                                        style={styles.avatar}
                                    />
                                </View>
                            </LinearGradient>
                        </View>
                        <View style={styles.greetingContainer}>
                            <Text style={styles.greeting}>你好，同学</Text>
                        </View>
                    </Animated.View>

                    {/* VIP会员卡片 */}
                    <Animated.View entering={FadeInDown.delay(200).springify()}>
                        <VipCard isActivated={isVipActivated} expiryDate={vipExpiryDate} />
                    </Animated.View>

                    {/* 我的学习 - 全新设计 */}
                    <View style={styles.learningSection}>
                        <Text style={styles.learningTitle}>我的学习</Text>

                        <View style={styles.learningGrid}>
                            <TouchableOpacity
                                style={styles.learningItem}
                                onPress={() => router.push("/my/favorites")}
                                activeOpacity={0.7}
                            >
                                <View style={[styles.learningIconBox, { backgroundColor: "#FFEFEF" }]}>
                                    <Star size={24} color="#FF6B6B" />
                                </View>
                                <Text style={styles.learningItemText}>收藏本</Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                style={styles.learningItem}
                                onPress={() => router.push("/my/wrong-questions")}
                                activeOpacity={0.7}
                            >
                                <View style={[styles.learningIconBox, { backgroundColor: "#EFF9FF" }]}>
                                    <FileText size={24} color="#5B8EF4" />
                                </View>
                                <Text style={styles.learningItemText}>错题本</Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                style={styles.learningItem}
                                onPress={() => router.push("/my/learning-records")}
                                activeOpacity={0.7}
                            >
                                <View style={[styles.learningIconBox, { backgroundColor: "#FFF8EF" }]}>
                                    <BookOpen size={24} color="#FFAA5B" />
                                </View>
                                <Text style={styles.learningItemText}>学习记录</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/* 设置和支持选项 */}
                    <Animated.View style={styles.optionsContainer} entering={FadeInDown.delay(500).springify()}>
                        <Animated.View entering={FadeInRight.delay(550).springify()}>
                            <TouchableOpacity
                                style={styles.optionItem}
                                onPress={() => router.push("/privacy-policy")}
                                activeOpacity={0.7}
                            >
                                <View style={styles.optionLeft}>
                                    <View style={[styles.optionIconContainer, { backgroundColor: "#F0EBFF" }]}>
                                        <Shield size={22} color={theme.colors.primary.purple} />
                                    </View>
                                    <Text style={styles.optionText}>隐私条款</Text>
                                </View>
                                <View style={styles.optionRight}>
                                    <ChevronRight size={20} color={theme.colors.neutral.gray} />
                                </View>
                            </TouchableOpacity>
                        </Animated.View>

                        <Animated.View entering={FadeInRight.delay(600).springify()}>
                            <TouchableOpacity
                                style={styles.optionItem}
                                onPress={() => router.push("/terms-of-service")}
                                activeOpacity={0.7}
                            >
                                <View style={styles.optionLeft}>
                                    <View style={[styles.optionIconContainer, { backgroundColor: "#E8F5E9" }]}>
                                        <FileTerminal size={22} color={theme.colors.secondary.green.default} />
                                    </View>
                                    <Text style={styles.optionText}>服务条款</Text>
                                </View>
                                <View style={styles.optionRight}>
                                    <ChevronRight size={20} color={theme.colors.neutral.gray} />
                                </View>
                            </TouchableOpacity>
                        </Animated.View>

                        <Animated.View entering={FadeInRight.delay(650).springify()}>
                            <TouchableOpacity
                                style={styles.optionItem}
                                onPress={() => router.push("/contact-us")}
                                activeOpacity={0.7}
                            >
                                <View style={styles.optionLeft}>
                                    <View style={[styles.optionIconContainer, { backgroundColor: "#E3F2FD" }]}>
                                        <MessageCircle size={22} color={theme.colors.primary.default} />
                                    </View>
                                    <Text style={styles.optionText}>联系我们</Text>
                                </View>
                                <View style={styles.optionRight}>
                                    <ChevronRight size={20} color={theme.colors.neutral.gray} />
                                </View>
                            </TouchableOpacity>
                        </Animated.View>

                        {/* 添加退出登录按钮 */}
                        <Animated.View entering={FadeInRight.delay(700).springify()}>
                            <TouchableOpacity
                                style={[styles.optionItem, { borderBottomWidth: 0 }]}
                                onPress={handleLogout}
                                activeOpacity={0.7}
                            >
                                <View style={styles.optionLeft}>
                                    <View style={[styles.optionIconContainer, { backgroundColor: theme.colors.secondary.red.light }]}>
                                        <LogOut size={22} color={theme.colors.secondary.red.default} />
                                    </View>
                                    <Text style={[styles.optionText, { color: theme.colors.secondary.red.default }]}>退出登录</Text>
                                </View>
                                <View style={styles.optionRight}>
                                    <ChevronRight size={20} color={theme.colors.neutral.gray} />
                                </View>
                            </TouchableOpacity>
                        </Animated.View>
                    </Animated.View>

                    {/* 版本信息 */}
                    <Animated.View style={styles.versionContainer} entering={FadeInDown.delay(700).springify()}>
                        <Text style={styles.versionText}>育儿英文教育 v1.0.0</Text>
                        <Text style={styles.copyrightText}>© 2023 All Rights Reserved</Text>
                    </Animated.View>
                </ScrollView>
            </LinearGradient>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    gradientBackground: {
        flex: 1,
    },
    scrollView: {
        flex: 1,
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: theme.spacing.xl,
        paddingVertical: theme.spacing.xl,
    },
    avatarWrapper: {
        marginRight: theme.spacing.lg,
    },
    avatarGradient: {
        width: 80,
        height: 80,
        borderRadius: 40,
        padding: 3,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(106, 74, 212, 0.5)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 6,
            },
        }),
    },
    avatarContainer: {
        width: "100%",
        height: "100%",
        borderRadius: 40,
        backgroundColor: "#FFF",
        alignItems: "center",
        justifyContent: "center",
        overflow: "hidden",
    },
    avatar: {
        width: 70,
        height: 70,
    },
    greetingContainer: {
        flex: 1,
    },
    greeting: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
    },
    sectionContainer: {
        marginHorizontal: theme.spacing.xl,
        marginTop: theme.spacing.xl,
    },
    sectionTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.lg,
    },
    // 全新设计的学习卡片
    learningCardsContainer: {
        marginBottom: theme.spacing.xl,
    },
    learningCardWrapper: {
        marginBottom: theme.spacing.md,
    },
    learningCard: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "#FFF",
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 4,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    learningCardIconBg: {
        width: 50,
        height: 50,
        borderRadius: 25,
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.lg,
    },
    learningCardContent: {
        flex: 1,
    },
    learningCardTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginBottom: 4,
    },
    learningCardDesc: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
    },
    learningCardArrow: {
        width: 32,
        height: 32,
        borderRadius: 16,
        backgroundColor: "rgba(0, 0, 0, 0.03)",
        alignItems: "center",
        justifyContent: "center",
    },
    optionsContainer: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        marginHorizontal: theme.spacing.xl,
        marginTop: theme.spacing.xl,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.05)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 4,
            },
            android: {
                elevation: 3,
            },
        }),
    },
    optionItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.lg,
        borderBottomWidth: 1,
        borderBottomColor: "rgba(0, 0, 0, 0.05)",
    },
    optionLeft: {
        flexDirection: "row",
        alignItems: "center",
    },
    optionIconContainer: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.md,
    },
    optionText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.black,
    },
    optionRight: {
        backgroundColor: "rgba(0, 0, 0, 0.03)",
        width: 32,
        height: 32,
        borderRadius: 16,
        alignItems: "center",
        justifyContent: "center",
    },
    versionContainer: {
        alignItems: "center",
        marginTop: theme.spacing.xxxl,
        marginBottom: theme.spacing.xxxl,
    },
    versionText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
        marginBottom: 4,
    },
    copyrightText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.gray,
    },
    // 新的学习模块样式
    learningSection: {
        marginHorizontal: theme.spacing.xl,
        marginTop: theme.spacing.xl,
        marginBottom: theme.spacing.xl,
        backgroundColor: "#FFFFFF",
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    learningTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.lg,
        paddingLeft: theme.spacing.xs,
        borderLeftWidth: 4,
        borderLeftColor: theme.colors.primary.default,
    },
    learningGrid: {
        flexDirection: "row",
        justifyContent: "space-between",
    },
    learningItem: {
        alignItems: "center",
        width: "30%",
    },
    learningIconBox: {
        width: 60,
        height: 60,
        borderRadius: 20,
        justifyContent: "center",
        alignItems: "center",
        marginBottom: theme.spacing.sm,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.05)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 4,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    learningItemText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
    },
})

